<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Week 5</title>
    </head>
    <body>
		<canvas id="gameCanvas" width="800" height="600"></canvas> 
        <script>
        	// create a reference to the canvas and its 2d context.
			var canvas = document.getElementById("gameCanvas");
			var context = canvas.getContext("2d");

				

			// load bomber image.
			var bomber = new Image();
			var bomber2 = new Image();
			bomber.src = "plane_right.png";
			bomber2.src = "plane_left.png";

			// set initial position of the plane.
            var x = 0;
			var y = 54;
			var bomber_speed;

			// draw bomber
			x_right = 0;//-bomber.width;
			y_right = 154;//getRandomInt(0, (canvas.height - bomber.height));

			x_left = canvas.width + bomber2.width;//-bomber.width;
			y_left = 0;//getRandomInt(0, (canvas.height - bomber.height));

			x_up = 0;//-bomber.width;
			y_up = 0;//getRandomInt(0, (canvas.height - bomber.height));

			x_down = 0;//-bomber.width;
			y_down = 0;//getRandomInt(0, (canvas.height - bomber.height));		
			// start the flying bomber timer when the image finishes loading.
			bomber.onload = function() {
			//context.drawImage(bomber, 0, 0);
			x = bomber.height;
			setInterval(drawsky, 1000 / 60);

			}

			function drawsky(){
				context.fillStyle = "#79BAEC";
				context.fillRect(0, 0, canvas.width, canvas.height);	
				context.fillStyle = "#FFFF44";
				context.arc(120, 110, 70, 0, 2 * Math.PI);
				context.fill();
				flyRight();
				flyLeft();
			}


			function flyRight() {
				context.drawImage(bomber, x_right, y_right);
				// move bomber a bit
				bomber_speed =  getRandomInt(1, 4);
		
				x_right += bomber_speed * 2;
				
				// reset bomber to left edge of screen...
				if (x_right > canvas.width) {
					x_right = -bomber.width;
				}
			}
			function flyLeft() {						
				context.drawImage(bomber2, x_left, y_left);
				// move bomber a bit
				bomber_speed =  getRandomInt(1, 4);
		
				x_left -= bomber_speed * 2;
				
				// reset bomber to left edge of screen...
				if (x_left < 0) {
					x_left = canvas.width+bomber.width;
				}
			}
			function getRandomInt(min, max) {
        		return Math.floor(Math.random() * (max - min + 1)) + min;
    		}			
        </script>
    </body>
</html>